<template>
	<view>
		<cu-custom bgColor="headerBg" :isBack="true" textColor="text-white">
			<block slot="content">提现</block>
		</cu-custom>
		<view class="app-header">
			<div class="background-gradient"></div>
			<view class="balance padding">
				<view class="content padding radius-xl bg-white padding-left-xl">
					<view class="text-black text-bold">当前可提现</view>
					<view class="number padding-top-sm text-bold text-black">
						<view class="money">
							<text class="text-red">{{USERINFO.technician_money}}</text>
						</view>
						<view class="right" @click="$utils.$page.open('/technician/pages/user/wallet/log', true)">
							<text class="text-gray">账单</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="inc text-sm margin-top-sm">
						冻结中：<text class="text-red">{{USERINFO.technician_freeze_money}}</text>
					</view>
					<view class="inc text-sm margin-top-sm">
						累计收益：<text class="text-red">{{USERINFO.technician_money_sum}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="custom padding padding-top-0">
			<view class="bg-white padding-sm radius-xl">
				<view class="margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>
					<text class="text-black">收款账户</text>
				</view>
				<view class="crow"
                @tap="showUserFinanceAccount=true">
                    <image v-if="finance.icon" :src="finance.icon" class="icon" />
                    <view class="flex-sub padding-left" v-if="finance.name">{{ finance.bank }} {{finance.name}}</view>
                    <view class="flex-sub padding-left" v-else>请选择收款账户</view>
					<text class="cuIcon-right"></text>
                </view>
			</view>
		</view>
		<view class="custom padding padding-top-0">
			<view class="bg-white padding-sm radius-xl">
				<view class="margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>
					<text class="text-black">提现金额</text>
				</view>
				<view class="crow bg-gray radius-lg">
					<input type="digit" inputmode="decimal" placeholder="0.00" class="input" v-model="form.money" maxlength="8">
					<text class="padding-right themeColor">元</text>
				</view>
					<view class="inc text-sm margin-top-sm" v-if="WEBCONFIG.technician_withdrawal_fee>0">
						提现费率：<text class="text-red">{{WEBCONFIG.technician_withdrawal_fee}}%</text>
					</view>
			</view>
		</view>

		<view class="tips padding text-sm padding-top-0">
			<view class="padding-bottom-xs text-gray">
				<text>{{WEBCONFIG.money_register_tips}}</text>
				<view class="text-sm text-gray">
					<text>请阅读</text>
					<text class="text-blue"
					@tap="$utils.$page.open('/pages/article/content?alias=withdrawal')">《提现须知》</text>
				</view>
			</view>
		</view>
		<view class="submit padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg round shadow china-btn-bg" @click="submit()">提现</button>
		</view>
		<u-popup
			:show="showUserFinanceAccount" 
            @close="()=>showUserFinanceAccount=false"
			mode="bottom" 
			>
            <view class="padding bg-f5f5f7">
                <view class="item crow padding-lg radius-xl margin-bottom"
                @tap="selectedFinance(account.alipay_payment_code)">
                    <image src="@/static/image/account/alipay_payment_code.png" class="icon" />
                    <view class="left text-left padding-left">支付宝收款码</view>
                    <view class="right text-right" v-if="account.alipay_payment_code.name">{{ account.alipay_payment_code.name }}</view>
                    <view class="right text-right text-grey" v-else>去设置</view>
                    <text class="cuIcon-right"></text>
                </view>
                <view class="item crow padding-lg radius-xl margin-bottom"
                @tap="selectedFinance(account.wechat_payment_code)">
                    <image src="@/static/image/account/wechat_payment_code.png" class="icon" />
                    <view class="left text-left padding-left">微信收款码</view>
                    <view class="right text-right" v-if="account.wechat_payment_code.name">{{ account.wechat_payment_code.name }}</view>
                    <view class="right text-right text-grey" v-else>去设置</view>
                    <text class="cuIcon-right"></text>
                </view>
                <!-- <view class="item crow padding-lg radius-xl margin-bottom"
                @tap="selectedFinance(account.wechat_transfer)">
                    <image src="@/static/image/account/wechat_transfer.png" class="icon" />
                    <view class="left text-left padding-left">转账到微信零钱</view>
                    <view class="right text-right" v-if="account.wechat_transfer.name">{{ account.wechat_transfer.name }}</view>
                    <view class="right text-right text-grey" v-else>去设置</view>
                    <text class="cuIcon-right"></text>
                </view> -->
                <view class="item crow padding-lg radius-xl margin-bottom"
                @tap="selectedFinance(account.bank_transfer)">
                    <image src="@/static/image/account/bank_transfer.png" class="icon" />
                    <view class="left text-left padding-left">银行卡转账</view>
                    <view class="right text-right" v-if="account.bank_transfer.name">{{ account.bank_transfer.bank }} {{ account.bank_transfer.name }}</view>
                    <view class="right text-right text-grey" v-else>去设置</view>
                    <text class="cuIcon-right"></text>
                </view>
            </view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	data() {
		return {
            showUserFinanceAccount:false,
			form: {
				channels:'',
                action:'technician',
				money: ''
			},
            finance:{},
            account:{
                alipay_payment_code:{
                    channels:'alipay_payment_code',
                    name:'',
                    mobile:'',
                    qrcode:''
                },
                wechat_payment_code:{
                    channels:'wechat_payment_code',
                    name:'',
                    mobile:'',
                    qrcode:''
                },
                wechat_transfer:{
                    channels:'wechat_transfer',
                    name:'',
                    mobile:''
                },
                bank_transfer:{
                    channels:'bank_transfer',
                    name:'',
                    mobile:'',
                    account:'',
                    bank:''
                },
            }
		};
	},
	onLoad() {
        const finance=this.$utils.useStorage().get('finance');
        if(finance){
            this.form.channels=finance.channels;
            this.finance=finance;
        }
	},
    onShow(){
		this.$utils.$api.User.userinfo(this, true);
        this.getAccount();
    },
	methods: {
        getAccount(){
            this.$utils.$api.UserFinanceAccount.index().then((data) => {
                for (const key in data) {
                    if (Object.hasOwnProperty.call(data, key)) {
                        const item = data[key];
                        this.account[key] = item;
                    }
                }
            }).catch((err) => {
                this.$utils.$message.error(err.msg);
            })
        },
        selectedFinance(channels){
            this.showUserFinanceAccount=false;
            if(channels.name){
                this.form.channels=channels.channels;
                channels.icon=require('@/static/image/account/'+channels.channels+'.png');
                this.finance=channels;
                this.$utils.useStorage().set('finance',channels);
            }else{
                this.form.channels='';
                this.finance={};
				this.$utils.useStorage().remove('finance');
                this.$utils.$page.open('/pages/user/finance/save?channels='+channels.channels)
            }
        },
		submit() {
            if (!this.form.money) {return}
            this.$utils.$api.Wallet.withdrawal(this.form)
            .then((res) => {
                this.$utils.$message.success(res.msg);
				this.$utils.$api.User.userinfo(this, true);
                setTimeout(() => {
                    this.$utils.$page.back();
                }, 1000);
            }).catch((err) => {
                this.$utils.$message.error(err.msg);
            })
		}
	}
}
</script>

<style lang="less" scoped>
.app-header {
	position: relative;
	overflow: hidden;

	.background-gradient {
		background-image: var(--header-bg-color);
		/* 渐变效果的颜色 */
		width: 100%;
		height: 230upx;
		/* 背景高度可根据需要进行调整 */
		border-bottom-left-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
		border-bottom-right-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
	}

	.balance {
		margin-top: -170upx;

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.money {
				font-size: 50upx;
			}

		}
	}
}
.item.crow{
    background-color: #FFFFFF;
		padding: 44rpx;
}
	.crow {
		justify-content: space-between;
		padding: 15upx;
        .icon{
            width: 60rpx;
            height: 60rpx;
        }

		.input {
			font-size: 36px;
            font-weight: bold;
            padding: 10px 20px;
		}

.right {
    flex: 1;
}
	}

</style>
